const app = getApp()

Page({
  data: {
    info: {}, //基本信息
    screenWidth: 0,
    canvas: null,
    bgImgObj: {},
    avatarImgObj: {},
    cachetObj: {}
  },
  onLoad: function (option) {
    // JSON.parse 将一个 JSON 字符串 转换成一个 JavaScript 对象或值
    this.data.info = JSON.parse(option.info)

    // 获取系统信息，获取可使用窗口宽度，单位px
    wx.getSystemInfo({
      success: (res) => {
        console.log(res);
        this.setData({
          screenWidth: res.windowWidth,
        });
      },
    })

    // wx.createSelectorQuery() 节点信息查询 API 可以用于获取节点属性、样式、在界面上的位置等信息，返回一个 SelectorQuery 对象实例。
    wx.createSelectorQuery()
      .select('#my-canvas') // 在 WXML 中填入的 id
      .fields({
        node: true,
        size: true
      })
      .exec((res) => {
        // 获取 Canvas 对象 --> res[0].node
        this.data.canvas = res[0].node
        // 渲染上下文RenderingContext  --> res[0].node.getContext('2d')
        // this.drawIdCard(Canvas 对象，Canvas 绘图上下文，基本信息，可使用窗口宽度）
        this.drawIdCard(res[0].node, res[0].node.getContext('2d'), this.data.info, this.data.screenWidth)
      })
  },

  // 绘制校园卡 方法
  drawIdCard: function (canvas, ctx, info, screenWidth) {
    // 绘制 背景图
    // 创建图片对象
    this.data.bgImgObj = canvas.createImage()
    // 设置图片对象的路径
    this.data.bgImgObj.src = "https://res.wx.qq.com/op_res/2hYrMJ_9APIyK-kOtZnzRd7625DO5GgCLsWFOzyHpPxXA4lkWdOi4hM8dHaQNyX5vEl-ATpsLJYw-pbg3poNtQ"
    this.data.bgImgObj.onload = () => {
      // ctx.drawImage(图片对象,在目标 canvas 上 x 轴的位置,在目标 canvas 上 y 轴的位置,t图片宽,图片高)
      ctx.drawImage(this.data.bgImgObj, -10, -10, screenWidth, screenWidth);
      // 绘制 官方认证 照片
      this.data.cachetObj = canvas.createImage()
      this.data.cachetObj.src = "https://res.wx.qq.com/op_res/2hYrMJ_9APIyK-kOtZnzRVSePZ6grSNVDlxK4kW_6I997pLs8k-W46NlOGjzdKaVEiu577EIcDKpKtaGjuXOXw"
      this.data.cachetObj.onload = () => {
        ctx.drawImage(this.data.cachetObj, 150, 30, 180, 150);
      }
      // 背景图太亮，设置灰色画矩形遮罩层
      ctx.fillStyle = "rgba(0,0,0,.5)";
      ctx.fillRect(0, 0, screenWidth, screenWidth);

      // 绘制 头像
      this.data.avatarImgObj = canvas.createImage()
      this.data.avatarImgObj.src = info.avatarImg
      this.data.avatarImgObj.onload = () => {
        ctx.drawImage(this.data.avatarImgObj, 15, 20, 90, 110);
        // 绘制基本信息，放在最后一个onload,确保在最上层，不被遮盖
        // 设置字号及字体
        ctx.font = "12px microsoft yahei";
        // 设置字体颜色
        ctx.fillStyle = "rgba(255,255,255,1)";
        // ctx.fillText(文本内容,文本起点的 x 轴坐标,文本起点的 y 轴坐标。)
        ctx.fillText(`学校： ${info.schoolName}`, 120, 30);
        ctx.fillText(`学院： ${info.academy}`, 120, 50);
        ctx.fillText(`专业： ${info.specialized}`, 120, 70);
        ctx.fillText(`姓名： ${info.name}`, 120, 90);
        ctx.fillText(`学号： ${info.certificateNumber}`, 120, 110);
        ctx.fillText(`班级： ${info.className}`, 120, 130);
      }
    }
  },
  // 保存校园卡 触发
  saveImage: function () {
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: this.data.screenWidth,
      height: 250,
      destWidth: this.data.screenWidth,
      destHeight: 250,
      canvas: this.data.canvas,
      fileType: "png",
      success: function (res) {
        console.log(res, "临时文件");
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success(res) {
            console.log("succ", res)
          },
          fail(res) {
            console.log("err", res)
          }
        })
      },
      fail: function (res) {
        console.log("err", res);
      },
    }, this);
  }
})